//折线图组件
import { getEnrollmentAPI } from '@/api/admin/dataStatistics';
import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react';

//1.把功能代码都放在这个组件中
//2.把可变的部分抽象成prop参数

const BarChart =({title}) =>{
    const chartRef =useRef(null);
    const [yData,setYData]=useState([])
   useEffect(()=>{
        //保证dom可用 才进行图表的渲染
        //1、获取渲染图表的dom节点
        const chartDom = chartRef.current;
        //2、图表初始化生成图表实例对象
        const myChart = echarts.init(chartDom);
            const monthNames = [];
            for (let i = 1; i <= 12; i++) {
            const month = i < 10 ? `0${i}` : i;
            monthNames.push(`${month}月`);
            }
            //获取y轴数据
            async function getEnrollmentData(){
                const res = await getEnrollmentAPI()
                setYData(res.data)
            }
            getEnrollmentData()
        //3、准备图表参数
        const option = {
            title:{
                text:title
            },
            xAxis: {
                type: 'category',
                data: monthNames
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: yData,
                  type: 'line'
                }
              ]
        };
        
        //使用图表参数完成图表的渲染
     if(yData !== '')
        option && myChart.setOption(option);
    },[])
    return <div><div ref={chartRef} style={{ width:'500px' , height:'400px' }}></div></div>
}

export default BarChart;